import React, { Component } from 'react'

const Brother1 = (props) => {
  return (
    <div>
      <h2>兄弟1</h2>
      <p>{props.count}</p>
      <button onClick={props.add}>add</button>
    </div>
  )
}
const Brother2 = ({ count }) => {
  return (
    <div>
      <h2>兄弟2</h2>
      <p>{count}</p>
    </div>
  )
}

// 父组件
export default class App extends Component {
  state = {
    count: 0,
  }
  // 字传父：父组件定义方法，给子组件使用
  add = () => {
    this.setState({
      count: this.state.count + 1,
    })
  }
  render() {
    return (
      <div>
        <h1>兄弟通信父组件</h1>
        <button onClick={this.add}>add</button>
        <hr />
        {/* 兄弟组件关系=》共享数据=》通过状态(响应数据)提升=》定义到父组件中(父传子) */}
        <Brother1 add={this.add} count={this.state.count}></Brother1>
        <Brother2 count={this.state.count}></Brother2>
      </div>
    )
  }
}
